<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iDeal接口代码生成器-Python</title>
    <link rel="stylesheet" href="static/cdn/element-plus.css" />
    <script src="static/cdn/vue-3.2.26.js"></script>
    <script src="static/cdn/element-ui.js"></script>
    <script src="static/cdn/axios-0.24.0.js"></script>
    <link rel="stylesheet" href="static/global.css" />
    <link rel="stylesheet" href="static/iconfont/iconfont.css" />
</head>

<body>
    <div id="app">
        <div class="container_header">
            <el-row>
                <el-col :offset="5" :span="14">
                    Flask_Sqlachemy_RESTfulAPI_Codegen
                </el-col>
                <el-col :span="5">
                    <el-tooltip placement="top">
                        <template #content>如果喜欢就点个星星支持一下</template>
                        <a href="https://gitee.com/ncepu-bj/Python_RESTfulAPI_Codegen" target="_blank" style="float: right;margin-right: 20px;color: #fff;text-decoration: auto;">
                            <div class="iconfont icon-shoucang1"></div>
                        </a>
                    </el-tooltip>
                </el-col>
            </el-row>
        </div>
        <div class="container_body">
            <el-row>
                <el-col :offset="4" :span="16">
                    <el-card shadow="never">
                        <el-card shadow="never">
                            <template #header>
                            <div v-if="loading">生成中...</div>
                            <div v-else>
                                <div>已完成</div>
                            </div>
                        </template>
                            <div v-if="!loading" style="margin-bottom: 10px;">目标代码请在{{path}}查看</div>
                            <el-progress :percentage="100" :indeterminate="loading" :duration="3" :show-text="false" />
                        </el-card>

                        <el-card>
                            程序运行日志
                            <el-scrollbar style="height: calc(100vh - 380px);">
                                <pre>{{log_info}}</pre>
                            </el-scrollbar>
                        </el-card>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="container_footer">
            <el-row>
                <el-col :offset="4" :span="16">
                    <div style="margin:0 20px;">
                        <el-button type="primary" style="float:right;width: 150px;" :disabled="loading" @click="download">代码下载</el-button>
                        <el-button type="primary" style="float:left;width: 150px;" :disabled="loading" @click="gohome">返回首页</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</body>

<script>
    const {
        reactive,
        toRefs,
        onMounted,
    } = Vue
    const {
        ElMessage,
    } = ElementPlus
    const composition = {
            setup() {
                const state = reactive({
                    loading: true,
                    log_info: "",
                    path: "",
                });

                //下载目标代码
                const download = () => {
                    let aTag = document.createElement('a');
                    aTag.href = "/download";
                    aTag.click();
                }

                const gohome = () => {
                    location.replace('/');
                }

                onMounted(() => {
                    let tables = JSON.parse(localStorage.getItem("tables"));
                    // 获取勾选的表信息
                    let tables_data = [];
                    for (let i = 0; i < tables.length; i++) {
                        if (tables[i].ischecked) {
                            tables_data.push(tables[i])
                        }
                    }

                    let views = JSON.parse(localStorage.getItem("views"));
                    // 获取勾选的表信息
                    let views_data = [];
                    for (let i = 0; i < views.length; i++) {
                        if (views[i].ischecked) {
                            views_data.push(views[i])
                        }
                    }

                    if (!tables || !views) {
                        ElMessage.warning('请重新连接数据库')
                        setTimeout(() => {
                            location.replace('/')
                        }, 1000)
                    }

                    const profile = {
                        "table": tables_data,
                        "view": views_data,
                    }

                    // 获取目标代码路径
                    axios({
                        method: 'POST',
                        url: '/getpath',
                    }).then(result => {
                        const res = result.data
                        if (res.code === '2000') {
                            state.path = res.data;
                        }
                    })

                    axios({
                        method: 'POST',
                        url: '/startbuild',
                        data: profile
                    }).then(result => {
                        const res = result.data
                        if (res.code === '2000') {
                            state.log_info = res.data;
                            state.loading = false;
                        } else {
                            ElMessage({
                                showClose: true,
                                dangerouslyUseHTMLString: true,
                                message: res.message,
                                type: 'error',
                                duration: 0,
                            })
                        }
                    })
                });

                return {
                    ...toRefs(state),
                    download,
                    gohome,
                };
            },
        }
        // 创建vue3的实例
    const app = Vue.createApp(
        composition
    )
    app.use(ElementPlus)
        // 挂载Vue的app实例
    app.mount('#app')
</script>

</html>